<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/icon.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/icon.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"right","width":300,"display":"hide","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":"disqus","storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="vue3保姆级教程初学vue3说来惭愧，vue3都发布了一年左右了，我才来学习vue3，看来我是真的弱鸡，现在的我是站在巨人的肩膀上来学习，刚出来vue3全是英文，看都看不懂，现在起码有中文了，结合了许多大佬的见解写出来的小白通俗易懂vue3理解，写的不好希望大家轻喷 ok，ok同志们，没有什么花里胡哨的开场白，今天我们来了解下vue3.">
<meta property="og:type" content="article">
<meta property="og:title" content="vue3保姆级教程">
<meta property="og:url" content="http://example.com/2021/12/09/Vue3%E6%95%99%E7%A8%8B/index.html">
<meta property="og:site_name" content="爱笑爱工作-_-">
<meta property="og:description" content="vue3保姆级教程初学vue3说来惭愧，vue3都发布了一年左右了，我才来学习vue3，看来我是真的弱鸡，现在的我是站在巨人的肩膀上来学习，刚出来vue3全是英文，看都看不懂，现在起码有中文了，结合了许多大佬的见解写出来的小白通俗易懂vue3理解，写的不好希望大家轻喷 ok，ok同志们，没有什么花里胡哨的开场白，今天我们来了解下vue3.">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a05a30f8ae504d378e44944371a4ccf0~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dcb2c8157004850ad319f478cea528b~tplv-k3u1fbpfcp-watermark.awebp?%60width=100px%60">
<meta property="og:image" content="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dedecd49c0344bf5b11f3fa3e4910787~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37464be282ed4d20bac0a27a680c0a52~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02ad78b38ddd4e02a3a95038203cacdd~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e91e06642dc64e3fa93bf57aad29359b~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b0acecab2ed4c05a5ad458eb1b31826~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97d17e33f76e43fba68e625543030905~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d912e962dacd47dc8af8f06b00464c68~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c74e9b227640468fb9a7c58bfae25a73~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2ea4dacbe214770b189f4bac2125303~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b45c187d48a1469eac0364e1739f5c37~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21f44a23aef5480c94583e13b0b21d2b~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a76b56471c0446579504381d723dd36f~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ef5cbcfa4dd4fc6a2cb536353f7026d~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98911351167640b0b6092df1509a2fd4~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3f7e77d5057475a91010b7d3608fa93~tplv-k3u1fbpfcp-watermark.awebp">
<meta property="article:published_time" content="2021-12-09T09:35:26.280Z">
<meta property="article:modified_time" content="2021-12-09T10:20:23.566Z">
<meta property="article:author" content="爱笑">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a05a30f8ae504d378e44944371a4ccf0~tplv-k3u1fbpfcp-watermark.awebp">

<link rel="canonical" href="http://example.com/2021/12/09/Vue3%E6%95%99%E7%A8%8B/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>vue3保姆级教程 | 爱笑爱工作-_-</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>
<a target="_blank" rel="noopener" href="https://github.com/aixiao0322" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>


    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">爱笑爱工作-_-</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-首页">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-目录">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>目录</a>

  </li>
        <li class="menu-item menu-item-分类">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-标签">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-关于">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/12/09/Vue3%E6%95%99%E7%A8%8B/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/title.jpg">
      <meta itemprop="name" content="爱笑">
      <meta itemprop="description" content="热衷于前端，热衷于王者，王者峡谷乱杀 -_-">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="爱笑爱工作-_-">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          vue3保姆级教程
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2021-12-09 17:35:26 / 修改时间：18:20:23" itemprop="dateCreated datePublished" datetime="2021-12-09T17:35:26+08:00">2021-12-09</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
                </span>
            </span>

          
            <span id="/2021/12/09/Vue3%E6%95%99%E7%A8%8B/" class="post-meta-item leancloud_visitors" data-flag-title="vue3保姆级教程" title="阅读次数">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span class="leancloud-visitors-count"></span>
              <span>℃</span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2021/12/09/Vue3%E6%95%99%E7%A8%8B/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2021/12/09/Vue3%E6%95%99%E7%A8%8B/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id><a href="#" class="headerlink" title></a></h1><h1 id="vue3保姆级教程"><a href="#vue3保姆级教程" class="headerlink" title="vue3保姆级教程"></a>vue3保姆级教程</h1><h1 id="初学vue3"><a href="#初学vue3" class="headerlink" title="初学vue3"></a>初学vue3</h1><p>说来惭愧，vue3都发布了一年左右了，我才来学习vue3，看来我是真的弱鸡，现在的我是站在巨人的肩膀上来学习，刚出来vue3全是英文，看都看不懂，现在起码有中文了，结合了许多大佬的见解写出来的小白通俗易懂vue3理解，写的不好希望大家轻喷</p>
<p>ok，ok同志们，没有什么花里胡哨的开场白，今天我们来了解下vue3.</p>
<span id="more"></span>

<h2 id="了解vue3创建方式"><a href="#了解vue3创建方式" class="headerlink" title="了解vue3创建方式"></a>了解vue3创建方式</h2><p>首先我们先创建vue3文件，当然这一步和vue2一样，我就不一一描述了哈，懂的都懂。</p>
<p>都创建好了吧，创建好了我们就来讲一讲<a href="https://link.juejin.cn/?target=https://vitejs.cn/">vite</a>😝</p>
<p>第一我们要先了解<strong>vite</strong>是什么，vite是尤雨溪团队开发的新一代的前端构建工具，意图取代<strong>webpack</strong>，首先我们先来看一看vite有什么优点</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a05a30f8ae504d378e44944371a4ccf0~tplv-k3u1fbpfcp-watermark.awebp" alt="vite.jpg"></p>
<ul>
<li>无需打包，快速的冷服务器启动</li>
<li>即时热模块更换（HMR，热更新）</li>
<li>真正的按需编译</li>
</ul>
<p>webpack是一开始是入口文件，然后分析路由，然后模块，最后进行打包，然后告诉你，服务器准备好了（默认8080）</p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dcb2c8157004850ad319f478cea528b~tplv-k3u1fbpfcp-watermark.awebp?%60width=100px%60" alt="bundler.37740380.png">然而vite是什么，它一开始是先告诉你服务器准备完成，然后等你发送HTTP请求，然后是入口文件，<code>Dynamic import</code>（动态导入）<code>code split point</code>（代码分割）<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dedecd49c0344bf5b11f3fa3e4910787~tplv-k3u1fbpfcp-watermark.awebp" alt="esm.3070012d.png">如何使用vite呢，大家可以去看<a href="https://link.juejin.cn/?target=https://vitejs.cn/">官网</a>，也可以看我写的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//要构建一个 Vite + Vue 项目，运行，使用 NPM:</span></span><br><span class="line">npm init @vitejs/app 项目名</span><br><span class="line"><span class="comment">//使用 Yarn:</span></span><br><span class="line">yarn create @vitejs/app 项目名</span><br><span class="line">你会觉得非常快速的创建了项目，然而它并没有给你下载依赖，你还有进入文件然后</span><br><span class="line">npm install (or yarn)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>然后它的打开方式不是 <code>serve</code> 变成了<code>dev</code><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37464be282ed4d20bac0a27a680c0a52~tplv-k3u1fbpfcp-watermark.awebp" alt="1636687125(1).png"><code>Edit components/HelloWorld.vue to test hot module replacement.</code></p>
<p>编辑components/HelloWorld.vue以测试热模块更换。（也就是热更新更快）</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02ad78b38ddd4e02a3a95038203cacdd~tplv-k3u1fbpfcp-watermark.awebp" alt="1636687189(1).jpg">然而我们只是简单了解下，我们现在的重点是vue3，如果以后vite成为主流，我们也可以在回头看看。😜</p>
<p>现在还是以主流的方式创建并进行讲解</p>
<h1 id="分析vue3"><a href="#分析vue3" class="headerlink" title="分析vue3"></a>分析vue3</h1><h2 id="基本了解"><a href="#基本了解" class="headerlink" title="基本了解"></a>基本了解</h2><p>当我们创建完成vue3项目后，点击它的main.js，你会发现写法发生了改变</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e91e06642dc64e3fa93bf57aad29359b~tplv-k3u1fbpfcp-watermark.awebp" alt="1636688554(1).jpg"></p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b0acecab2ed4c05a5ad458eb1b31826~tplv-k3u1fbpfcp-watermark.awebp" alt="1636688564(1).jpg">引入的不是vue构造函数，而是<code>createApp</code>工厂函数然而，创建实例对象其实就相当于vue2中的<code>vm</code>，<code>mount（&#39;#app&#39;）</code>就相当于<code>$mount(&#39;#app&#39;)</code>，并且vue2的写法在vue3不能兼容</p>
<p>现在我们进入App组件，你会发现什么不一样的地方，他没有了根标签，在vue2的时候，我们都是在div根标签里面写东西，所以在vue3里面可以没有根标签</p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97d17e33f76e43fba68e625543030905~tplv-k3u1fbpfcp-watermark.awebp" alt="1636697972(1).jpg"></p>
<h2 id="常用组合式API（重点！！！）"><a href="#常用组合式API（重点！！！）" class="headerlink" title="常用组合式API（重点！！！）"></a>常用组合式API（重点！！！）</h2><h3 id="setup"><a href="#setup" class="headerlink" title="setup"></a>setup</h3><p><strong>setup函数是 Composition API（组合API）的入口</strong></p>
<p><strong>在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"> <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;App&#x27;</span>,</span><br><span class="line">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">   <span class="keyword">let</span> name = <span class="string">&#x27;流星&#x27;</span></span><br><span class="line">   <span class="keyword">let</span> age = <span class="number">18</span></span><br><span class="line">   <span class="comment">//方法</span></span><br><span class="line">   <span class="function"><span class="keyword">function</span> <span class="title">say</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`我叫<span class="subst">$&#123;name&#125;</span>,今年<span class="subst">$&#123;age&#125;</span>岁`</span>)</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   <span class="comment">//返回一个对象</span></span><br><span class="line">   <span class="keyword">return</span> &#123;</span><br><span class="line">    name,</span><br><span class="line">    age,</span><br><span class="line">    say</span><br><span class="line">   &#125;</span><br><span class="line">  &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>当然这不是响应式的写法，然后你们可能会问，为什么没有用<code>this</code>，我们要想一想之前为什么要用<code>this</code>，还不是作用域的问题，然而这次我们都在<code>setup</code>里面，所以不会用到<code>this</code>，而且这里兼容vue2的写法如：<code>data，methods...</code>，并且在vue2中可以读取到vue3里的配置但是vue3里面不能读取到vue2的配置，所以，vue3和vue2不要混用，如果有重名那么优先<code>setup</code>。</p>
<p>ps.如果大家不喜欢<code>return</code>这样的写法的话，可以用vue3新语法糖<code>&lt;script setup&gt;</code>，<code>&lt;script setup&gt;</code>就相当于在编译运行是把代码放到了 setup 函数中运行，然后把导出的变量定义到上下文中，并包含在返回的对象中。具体操作可以看掘金其他大佬</p>
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/7002490039066165279">script setup基本使用</a></p>
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6983626263327932429">上手后才知道 ，Vue3 的 script setup 语法糖是真的爽</a></p>
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6944190150406570020">vue3新语法糖——setup script</a></p>
<p>……</p>
<p><strong>setup还有几个注意点</strong></p>
<ul>
<li>它比<code>beforeCreate</code>和<code>created</code>这两个生命周期还要<strong>快</strong>，就是说，setup在<code>beforeCreate,created</code>前，它里面的this打印出来是<code>undefined</code></li>
<li>setup可以接受两个参数，第一个参数是<code>props</code>,也就是组件传值，第二个参数是<code>context</code>,上下文对象，<code>context</code>里面还有三个很重要的东西<code>attrs</code>，<code>slots</code>,<code>emit</code>，它们就相当于vue2里面的<code>this.$attrs</code>,<code>this.$slots</code>,<code>this.$emit</code>。</li>
</ul>
<p>通过打印，你可以看到传值，但是会有警告，那是因为我传了两个值，却只接收了一个，要是两个都接收就不会出现警告了<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d912e962dacd47dc8af8f06b00464c68~tplv-k3u1fbpfcp-watermark.awebp" alt="1636791090(1).jpg">这个是因为vue3中要求我们用<code>emits</code>去接收，接收后就不会警告了，但是也可以不理警告直接用<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c74e9b227640468fb9a7c58bfae25a73~tplv-k3u1fbpfcp-watermark.awebp" alt="1636794022.jpg">使用插槽时，不能使用 <code>slot=&quot;XXX&quot;</code>,要使用<code>v-slot</code>，不然会报错</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line">父</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">HelloWorld</span> <span class="attr">wish</span>=<span class="string">&quot;不掉发&quot;</span> <span class="attr">wishes</span>=<span class="string">&quot;变瘦&quot;</span> @<span class="attr">carried</span>=<span class="string">&quot;carried&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">h3</span>&gt;</span>实现插槽1<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:dome</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">h4</span>&gt;</span>实现插槽2<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">HelloWorld</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">import</span> HelloWorld <span class="keyword">from</span> <span class="string">&quot;./components/HelloWorld&quot;</span>;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">components</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    HelloWorld</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">carried</span>(<span class="params">value</span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      alert(<span class="string">`牛呀，都实现了！！！<span class="subst">$&#123;value&#125;</span>`</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      carried</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">-------</span><br><span class="line">子</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>HelloWorld<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123; wish &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;dream&quot;</span>&gt;</span>点击实现<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">slot</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&quot;dome&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">name</span>: <span class="string">&quot;HelloWorld&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">props</span>: [<span class="string">&quot;wish&quot;</span>,<span class="string">&#x27;wishes&#x27;</span>],</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">emits</span>:[<span class="string">&#x27;carried&#x27;</span>],</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">setup</span>(<span class="params">props,context</span>)</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="built_in">console</span>.log(props)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="built_in">console</span>.log(context.attrs)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">dream</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      context.emit(<span class="string">&#x27;carried&#x27;</span>,<span class="number">666</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      dream</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="ref与reactive"><a href="#ref与reactive" class="headerlink" title="ref与reactive"></a>ref与reactive</h3><h4 id="ref"><a href="#ref" class="headerlink" title="ref"></a>ref</h4><p>上方我说到，我们写的不是响应式数据，我们写的只是字符串和数字，那怎么变成响应式数据呢，那就呀引入<strong>ref</strong>，但是如果我们直接在代码里面修改是修改不了的,不如打印一下name和age，你会发现ref把它们变成了对象 并且还是<code>RefImpl</code>的实例对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>姓名：&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>年龄：&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;say&quot;</span>&gt;</span>修改<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> name = ref(<span class="string">&#x27;燕儿&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> age = ref(<span class="number">18</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="built_in">console</span>.log(name)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="built_in">console</span>.log(age)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="comment">//方法</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">say</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      name=<span class="string">&#x27;苒苒&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">      age=<span class="number">20</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      name,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      age,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      say</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>所以，在修改的时候要.value去修改，里面还是走的get与set去修改页面<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2ea4dacbe214770b189f4bac2125303~tplv-k3u1fbpfcp-watermark.awebp" alt="1636706595(1).jpg">其实按道理的话，我们在页面上用的话应该要<code>&#123;&#123;name.value&#125;&#125;</code>显示的，但是因为vue3检测到你是ref对象，它就自动给你.value了</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">say</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  name.value=<span class="string">&#x27;苒苒&#x27;</span></span><br><span class="line">  age.value=<span class="number">20</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>那么要是我定义的ref是个对象呢，因为我们知道尽管ref后会变成<code>RefImpl</code>的实例对象，所以我们就用<code>XX.value.xx</code>进行修改</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>姓名：&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>年龄：&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>职业：&#123;&#123;job.occupation&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>薪资：&#123;&#123;job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;say&quot;</span>&gt;</span>修改<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> name = ref(<span class="string">&#x27;燕儿&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> age = ref(<span class="number">18</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> job=ref(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">occupation</span>:<span class="string">&#x27;程序员&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">salary</span>:<span class="string">&#x27;10k&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="built_in">console</span>.log(name)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="built_in">console</span>.log(age)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="comment">//方法</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">say</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      job.value.salary=<span class="string">&#x27;12k&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      name,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      age,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      job,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      say</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>但是我们打印job.value,你会发现，它不再是<code>RefImpl</code>实例对象，变成了<code>Proxy</code>实例对象，他只是vue3底层，把对象都变成了<code>Proxy</code>实例对象，对于基本数据类型就是按照<code>Object.defineProperty</code>里面的<code>get</code>和<code>set</code>进行数据劫持然后进行响应式，但是如果是对象类型的话，是用到的<code>Proxy</code>，但是vue3把它封装在新函数<strong>reactive</strong>里，就相当于，ref中是对象，自动会调用<strong>reactive</strong>。</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b45c187d48a1469eac0364e1739f5c37~tplv-k3u1fbpfcp-watermark.awebp" alt="1636707807(1).jpg"></p>
<h4 id="reactive"><a href="#reactive" class="headerlink" title="reactive"></a>reactive</h4><p>reactive只能定义对象类型的响应式数据，前面说到的ref里是对象的话，会自动调用<strong>reactive</strong>，把<code>Object</code>转换为<code>Proxy</code>，那我们来打印一下，你会发现就直接变成了<code>Proxy</code>，之前为什么会.value呢，是因为要去获取值，然后通过<strong>reactive</strong>变成<code>Proxy</code>，但是现在是直接通过<strong>reactive</strong>变成<code>Proxy</code>，而且它是进行的一个深层次的响应式，也可以进行数组的响应式</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>姓名：&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>年龄：&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>职业：&#123;&#123;job.occupation&#125;&#125;<span class="tag">&lt;<span class="name">br</span>&gt;</span>薪资：&#123;&#123;job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>爱好：&#123;&#123;hobby[0]&#125;&#125;,&#123;&#123;hobby[1]&#125;&#125;,&#123;&#123; hobby[2] &#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;say&quot;</span>&gt;</span>修改<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">import</span> &#123;ref,reactive&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> name = ref(<span class="string">&#x27;燕儿&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> age = ref(<span class="number">18</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> job=reactive(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">occupation</span>:<span class="string">&#x27;程序员&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">salary</span>:<span class="string">&#x27;10k&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> hobby=reactive([<span class="string">&#x27;刷剧&#x27;</span>,<span class="string">&#x27;吃鸡&#x27;</span>,<span class="string">&#x27;睡觉&#x27;</span>])</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="built_in">console</span>.log(name)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="built_in">console</span>.log(age)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="comment">//方法</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">say</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      job.salary=<span class="string">&#x27;12k&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">      hobby[<span class="number">0</span>]=<span class="string">&#x27;学习&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      name,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      age,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      job,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      say,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      hobby</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>有些人可能觉得，哎呀，我记不住，我就用<code>ref</code>，每次就<code>.value</code>可以了，香香香。他喵的，你正常点，要是一个页面就几个数据的话那还好，要是一堆数据，不得把你<code>.value</code>点的冒烟吗？，其实你可以按照之前vue2中data的形式来写，这样你就会觉得<code>reactive</code>香的一批了😁</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>姓名：&#123;&#123;data.name&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>年龄：&#123;&#123;data.age&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>职业：&#123;&#123;data.job.occupation&#125;&#125;<span class="tag">&lt;<span class="name">br</span>&gt;</span>薪资：&#123;&#123;data.job.salary&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>爱好：&#123;&#123;data.hobby[0]&#125;&#125;,&#123;&#123;data.hobby[1]&#125;&#125;,&#123;&#123; data.hobby[2] &#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;say&quot;</span>&gt;</span>修改<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">import</span> &#123;reactive&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> data=reactive(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">name</span>:<span class="string">&#x27;燕儿&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">age</span>:<span class="number">18</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">job</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="attr">occupation</span>:<span class="string">&#x27;程序员&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="attr">salary</span>:<span class="string">&#x27;10k&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">      &#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">hobby</span>:[<span class="string">&#x27;刷剧&#x27;</span>,<span class="string">&#x27;吃鸡&#x27;</span>,<span class="string">&#x27;睡觉&#x27;</span>]</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="comment">//方法</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">say</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      data.job.salary=<span class="string">&#x27;12k&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">      data.hobby[<span class="number">0</span>]=<span class="string">&#x27;学习&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      data,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      say,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>怎么样，是不是直接暴露出去个data就好了，这样起码更能理解，不会让人摸不着头脑为什么要<code>.value</code>，是吧😊</p>
<h4 id="ref与reactive的区别"><a href="#ref与reactive的区别" class="headerlink" title="ref与reactive的区别"></a>ref与reactive的区别</h4><ul>
<li>ref用来定义：<strong>基本类型数据</strong>。</li>
<li>ref通过<code>Object.defineProperty()</code>的<code>get</code>与<code>set</code>来实现响应式（数据劫持）。</li>
<li>ref定义的数据：操作数据需要<code>.value</code>，读取数据时模板中直接读取不需要<code>.value</code>。</li>
<li>reactive用来定义：<strong>对象或数组类型数据</strong>。</li>
<li>reactive通过使用<strong>Proxy</strong>来实现响应式（数据劫持）, 并通过<strong>Reflect</strong>操作源代码内部的数据。</li>
<li>reactive定义的数据：操作数据与读取数据：均不需要<code>.value</code>。</li>
</ul>
<p>当然，我之前就说过，ref可以定义对象或数组的，它只是内部自动调用了<strong>reactive</strong>来转换。</p>
<h3 id="vue3的响应式原理"><a href="#vue3的响应式原理" class="headerlink" title="vue3的响应式原理"></a>vue3的响应式原理</h3><p>说到vue3的响应式原理，那我们就不得不提一句vue2的响应式了，（狗都知道的一句）通过<code>Object.defineProperty</code>的<code>get</code>，<code>set</code>来进行数据劫持，修改，从而响应式,但是它有什么缺点呢😶</p>
<ul>
<li>由于只有get()、set() 方式，所以只能捕获到属性读取和修改操作，当 新增、删除属性时，捕获不到，导致界面也不会更新。</li>
<li>直接通过下标修改数组，界面也不会自动更新。</li>
</ul>
<p>ok，vue2就聊这么多，什么？你还想听vue2底层？那你就Alt+←，拜拜了您嘞。</p>
<p>对于vue3中的响应式，我们用到的<strong>Proxy</strong>，当然，我们在vue2里面知道，<strong>Proxy</strong>是什么，是代理，当然，并不是只用到了它，还有个Window上的内置对象<code>Reflect（反射）</code></p>
<ul>
<li>通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。</li>
<li>通过Reflect（反射）: 对源对象的属性进行操作。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> p=<span class="keyword">new</span> <span class="built_in">Proxy</span>(data, &#123;</span><br><span class="line"><span class="comment">// 读取属性时调用</span></span><br><span class="line">    get (target, propName) &#123;</span><br><span class="line">    	<span class="keyword">return</span> <span class="built_in">Reflect</span>.get(target, propName)</span><br><span class="line">    &#125;,</span><br><span class="line"><span class="comment">//修改属性或添加属性时调用</span></span><br><span class="line">    set (target, propName, value) &#123;</span><br><span class="line">    	<span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target, propName, value)</span><br><span class="line">    &#125;,</span><br><span class="line"><span class="comment">//删除属性时调用</span></span><br><span class="line">    deleteProperty (target, propName) &#123;</span><br><span class="line">    	<span class="keyword">return</span> <span class="built_in">Reflect</span>.deleteProperty(target, propName)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;) </span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="computed，watch与watchEffect"><a href="#computed，watch与watchEffect" class="headerlink" title="computed，watch与watchEffect"></a>computed，watch与watchEffect</h3><h4 id="computed"><a href="#computed" class="headerlink" title="computed"></a>computed</h4><p>在vue3中，把<code>computed</code>变成为组合式API，那么就意味着你要去引入它，代码如下，一个简易的计算就完成了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span><br><span class="line">    姓：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;names.familyName&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;names.lastName&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    姓名：&#123;&#123;fullName&#125;&#125;<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123;reactive,computed&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> names=reactive(&#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">familyName</span>:<span class="string">&#x27;阿&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">lastName</span>:<span class="string">&#x27;斌&#x27;</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    fullName=computed(<span class="function">()=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> names.familyName+<span class="string">&#x27;.&#x27;</span>+names.lastName</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      names,</span></span><br><span class="line"><span class="javascript">      fullName</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>要是你去修改计算出来的东西，你知道会发生什么吗？警告的意思是计算出来的东西是一个只读属性。</p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21f44a23aef5480c94583e13b0b21d2b~tplv-k3u1fbpfcp-watermark.awebp" alt="1636807524(1).jpg">那要是我们想要修改怎么办呢,那么就要用到<code>computed</code>的终结写法了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span><br><span class="line">    姓：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;names.familyName&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;names.lastName&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    姓名：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;names.fullName&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123;reactive,computed&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> names=reactive(&#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">familyName</span>:<span class="string">&#x27;阿&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">lastName</span>:<span class="string">&#x27;斌&#x27;</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    names.fullName=computed(&#123;</span></span><br><span class="line"><span class="javascript">      <span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> names.familyName+<span class="string">&#x27;.&#x27;</span>+names.lastName</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="function"><span class="title">set</span>(<span class="params">value</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">let</span>  nameList=value.split(<span class="string">&#x27;.&#x27;</span>)</span></span><br><span class="line"><span class="javascript">        names.familyName=nameList[<span class="number">0</span>]</span></span><br><span class="line"><span class="javascript">        names.lastName=nameList[<span class="number">1</span>]</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      names</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>但是，yysy（有一说一），他喵的，我寻思也没有人会去改计算属性吧？如果有，就当我没说😷</p>
<h4 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h4><p>你可能会想到<code>computed</code>都是组合式API，那么<code>watch</code>会不会也是组合式API呢？大胆点，它也是， 那么我们就来进行监视</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前数字为:&#123;&#123;num&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;num++&quot;</span>&gt;</span>点击数字加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123;ref,watch&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> num=ref(<span class="string">&#x27;0&#x27;</span>)</span></span><br><span class="line"><span class="javascript">    watch(num,<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">`当前数字增加了,<span class="subst">$&#123;newValue&#125;</span>,<span class="subst">$&#123;oldValue&#125;</span>`</span>)</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      num</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>当然这是监听<code>ref</code>定义出来的单个响应式数据，要是监听多个数据应该怎么办呢？其实可以用多个<code>watch</code>去进行监听，当然这不是最好的方法，最好的办法其实是监视数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">watch([num,msg],<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">     <span class="built_in">console</span>.log(<span class="string">&#x27;当前改变了&#x27;</span>,newValue,oldValue)</span><br><span class="line">   &#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>既然我们监听的是数组，那么我们得到的<code>newValue</code>和<code>oldValue</code>也就是数组，那么数组中的第一个就是你监视的第一个参数。</p>
<p>ps.当然之前在vue2中<code>watch</code>不是有什么其他参数吗，vue3中也有,是写在最后的。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">watch([num,msg],<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;当前改变了&#x27;</span>,newValue,oldValue)</span><br><span class="line">    &#125;,&#123;<span class="attr">immediate</span>:<span class="literal">true</span>,<span class="attr">deep</span>:<span class="literal">true</span>&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>之前我说过，我们现在监听的是监听<code>ref</code>定义出来数据，那么要是我们监听的是<code>reactive</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前姓名:&#123;&#123;names.familyName&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前年龄:&#123;&#123;names.age&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前薪水:&#123;&#123;names.job.salary&#125;&#125;K<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;names.familyName+=&#x27;!&#x27;&quot;</span>&gt;</span>点击加!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;names.age++&quot;</span>&gt;</span>点击加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;names.job.salary++&quot;</span>&gt;</span>点击薪水加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123;reactive,watch&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> names=reactive(&#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">familyName</span>: <span class="string">&#x27;鳌&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">age</span>:<span class="number">23</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">job</span>:&#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">salary</span>:<span class="number">10</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    watch(names,<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">`names改变了`</span>,newValue,oldValue)</span></span><br><span class="line"><span class="javascript">    &#125;,&#123;<span class="attr">deep</span>:<span class="literal">false</span>&#125;)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      names</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>但是你会发现一个问题，为什么<code>newValue</code>与<code>oldValue</code>一样呢，就很尴尬，都是新的数据，就算你使用<code>ref</code>来定义，还是没有办法监听到<code>oldValue</code>（他喵的，都给你说了<code>ref</code>定义的对象会自动调用<code>reactive</code>）,所以<strong>在监视reactive定义的响应式数据时，oldValue无法正确获取</strong>,并且你会发现，它是<strong>强制开启深度监视（<code>deep:true</code>），并且无法关闭。</strong></p>
<p>然而现在我们监视的是<code>reactive</code>定义的响应式数据的全部属性，是只监听其中的一个属性，那怎么办呢，可能大家会</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">watch(names.age,<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`names改变了`</span>,newValue,oldValue)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>来进行监视，但是，vue3会警告只能监听<code>reactive</code>定义的或者<code>ref</code>定义的,并且不能监听。<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a76b56471c0446579504381d723dd36f~tplv-k3u1fbpfcp-watermark.awebp" alt="1636813377(1).jpg">那么我们就必须这样写（不会还有人不知道<code>return</code>可以省略吧？不会吧？不会吧？不会那个人就是你吧？）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">watch(<span class="function">()=&gt;</span>names.age,<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;names改变了&#x27;</span>,newValue,oldValue)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>那么要是我们监听的是多个属性，那怎么办呢？emmmm，你正常点，我上面都写了监听多个<code>ref</code>定义的响应式数据，你就不会举一反三吗？敲代码很累的好吧！！！他喵的，为了防止你们问多个<code>reactive</code>定义的一个属性，我就只能说和这个是一样的！！！能不能聪明点！！！</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">watch([<span class="function">()=&gt;</span>names.age,<span class="function">()=&gt;</span>names.familyName],<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;names改变了&#x27;</span>,newValue,oldValue)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>ok，要是我们监听的是深度的属性那要怎么办呢？你会发现我要是只监听第一层是监听不到的，那么我们有两种写法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第一种</span></span><br><span class="line">watch(<span class="function">()=&gt;</span> names.job.salary,<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;names改变了&#x27;</span>,newValue,oldValue)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//第二种</span></span><br><span class="line">watch(<span class="function">()=&gt;</span> names.job,<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;names改变了&#x27;</span>,newValue,oldValue)</span><br><span class="line">&#125;,&#123;<span class="attr">deep</span>:<span class="literal">true</span>&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>那么我们就可以这样理解，<strong>如果监视的是<code>reactive</code>定义的响应式数据的属性，并且这个属性是对象，那么我们可以开启深度监视</strong></p>
<p>（人都写傻了，写了四千多字了，还没写完…）</p>
<h4 id="watchEffect"><a href="#watchEffect" class="headerlink" title="watchEffect"></a>watchEffect</h4><p><code>watchEffect</code>是vue3的新函数，它是来和<code>watch</code>来抢饭碗的，它和<code>watch</code>是一样的功能，那它有什么优势呢？</p>
<ul>
<li>自动默认开启了<code>immediate:true</code></li>
<li>用到了谁就监视谁</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">watchEffect(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">const</span> one = num.value</span><br><span class="line">    <span class="keyword">const</span> tow = person.age</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;watchEffect执行了&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>其实吧，<code>watchEffect</code>有点像<code>computed</code>，都是里面的值发生了改变就调用一次，但是呢<code>computed</code>要写返回值,而<code>watchEffect</code>不用写返回值。</p>
<h3 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h3><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ef5cbcfa4dd4fc6a2cb536353f7026d~tplv-k3u1fbpfcp-watermark.awebp" alt="lifecycle.png"></p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98911351167640b0b6092df1509a2fd4~tplv-k3u1fbpfcp-watermark.awebp" alt="2021060423231561.png">我们先来简单分析下，在vue2中，我们是先<code>new Vue()</code>，然后执行<code>beforeCreate</code>与<code>created</code>接着问你有没有<code>vm.$mount(el)</code>，有，才继续执行，但是在vue3中，它是先全部准备好后然后再进行函数。</p>
<p>其实在vue3中生命周期没有多大的改变，只是改变了改变了销毁前，和销毁，让它更加语义化了 <strong><code>beforeDestroy</code>改名为<code>beforeUnmount</code>,<code>destroyed</code>改名为<code>unmounted</code></strong></p>
<p>然后在vue3中，**<code>beforeCreate</code>与<code>created</code>并没有组合式API中,<code>setup</code>就相当于这两个生命周期函数**</p>
<p><strong>在vue3中也可以按照之前的生命周期函数那样写，只是要记得有些函数名称发生了改变</strong></p>
<p>在<code>setup</code>里面应该这样写</p>
<ul>
<li><code>beforeCreate</code>===&gt;<code>Not needed*</code></li>
<li><code>created</code>=======&gt;<code>Not needed*</code></li>
<li><code>beforeMount</code> ===&gt;<code>onBeforeMount</code></li>
<li><code>mounted</code>=======&gt;<code>onMounted</code></li>
<li><code>beforeUpdate</code>===&gt;<code>onBeforeUpdate</code></li>
<li><code>updated</code> =======&gt;<code>onUpdated</code></li>
<li><code>beforeUnmount</code> ==&gt;<code>onBeforeUnmount</code></li>
<li><code>unmounted</code> =====&gt;<code>onUnmounted</code></li>
</ul>
<h3 id="hooks函数"><a href="#hooks函数" class="headerlink" title="hooks函数"></a>hooks函数</h3><ul>
<li>Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与 hooks 是函数</li>
<li>Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数</li>
</ul>
<p>其实就是代码的复用，可以用到外部的数据，生命钩子函数…，具体怎么用直接看代码，</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//一般都是建一个hooks文件夹，都写在里面</span></span><br><span class="line"><span class="keyword">import</span> &#123;reactive,onMounted,onBeforeUnmount&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">   <span class="comment">//鼠标点击坐标</span></span><br><span class="line">   <span class="keyword">let</span> point = reactive(&#123;</span><br><span class="line">      <span class="attr">x</span>:<span class="number">0</span>,</span><br><span class="line">      <span class="attr">y</span>:<span class="number">0</span></span><br><span class="line">   &#125;)</span><br><span class="line"></span><br><span class="line">   <span class="comment">//实现鼠标点击获取坐标的方法</span></span><br><span class="line">   <span class="function"><span class="keyword">function</span> <span class="title">savePoint</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">      point.x = event.pageX</span><br><span class="line">      point.y = event.pageY</span><br><span class="line">      <span class="built_in">console</span>.log(event.pageX,event.pageY)</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   <span class="comment">//实现鼠标点击获取坐标的方法的生命周期钩子</span></span><br><span class="line">   onMounted(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">      <span class="built_in">window</span>.addEventListener(<span class="string">&#x27;click&#x27;</span>,savePoint)</span><br><span class="line">   &#125;)</span><br><span class="line"></span><br><span class="line">   onBeforeUnmount(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">      <span class="built_in">window</span>.removeEventListener(<span class="string">&#x27;click&#x27;</span>,savePoint)</span><br><span class="line">   &#125;)</span><br><span class="line"></span><br><span class="line">   <span class="keyword">return</span> point</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//在其他地方调用</span></span><br><span class="line"><span class="keyword">import</span> useMousePosition <span class="keyword">from</span> <span class="string">&#x27;./hooks/useMousePosition&#x27;</span></span><br><span class="line"><span class="keyword">let</span> point = useMousePosition（）</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="toRef与toRefs"><a href="#toRef与toRefs" class="headerlink" title="toRef与toRefs"></a>toRef与toRefs</h3><h4 id="toRef"><a href="#toRef" class="headerlink" title="toRef"></a>toRef</h4><p><code>toRef</code>翻译过来其实就是把什么变成<code>ref</code>类型的数据，可能大家会觉得没有什么用，毕竟我们之前定义时就已经定义成<code>ref</code>,但是你们想一想，我们在之前是怎么写的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前姓名:&#123;&#123;names.name&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前年龄:&#123;&#123;names.age&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前薪水:&#123;&#123;names.job.salary&#125;&#125;K<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;names.name+=&#x27;!&#x27;&quot;</span>&gt;</span>点击加!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;names.age++&quot;</span>&gt;</span>点击加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;names.job.salary++&quot;</span>&gt;</span>点击薪水加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">import</span> &#123;reactive&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> names=reactive(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">name</span>:<span class="string">&#x27;老谭&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">age</span>:<span class="number">23</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">job</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="attr">salary</span>:<span class="number">10</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">      &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      names</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>是不是一直都是用到代码<code>name.xx</code>，可能你会说，那我就<code>return</code>的时候不这样写，改成这样</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">return</span> &#123;</span><br><span class="line">  <span class="attr">name</span>:names.name,</span><br><span class="line">  <span class="attr">age</span>:names.age,</span><br><span class="line">  <span class="attr">salary</span>:names.job.salary</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>但是你要是在页面进行操作时就不是响应式了，为什么呢？那是因为你现在暴露出去的是简简单单的字符串，字符串会有响应式吗？肯定没有呀，但是你要是用到了<code>toRef</code>,那就是把<code>name.xx</code>变为响应式，然后操作它时会自动的去修改<code>name</code>里面的数据</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">return</span> &#123;</span><br><span class="line">  <span class="attr">name</span>:toRef(names,<span class="string">&#x27;name&#x27;</span>),</span><br><span class="line">  <span class="attr">age</span>:toRef(names,<span class="string">&#x27;age&#x27;</span>),</span><br><span class="line">  <span class="attr">salary</span>:toRef(names.job,<span class="string">&#x27;salary&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>但是有的人可能会说那我为什么不用<code>ref</code>去改变？可能大家会发现在页面里也是响应式的，但是我告诉你们，根本用到的不是<code>names</code>里面的数据，而是你单独定义出来的数据，所以要是这样写，无论怎么修改都不会修改到<code>names</code>里的数据</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">return</span> &#123;</span><br><span class="line">  <span class="attr">name</span>:ref(names.name),</span><br><span class="line">  <span class="attr">age</span>:ref(names.age),</span><br><span class="line">  <span class="attr">salary</span>:ref(names.job.salary),</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="toRefs"><a href="#toRefs" class="headerlink" title="toRefs"></a>toRefs</h4><p>聪明一点，<code>toRefs</code>与<code>toRef</code>有什么不同，加了个<code>s</code>,<code>toRef</code>是单个转化为响应式，那<code>toRefs</code>就是多个转化为响应式咯，这样的话就减少代码，不然要是有成千上万个，那你不是要当憨憨闷写吗？（<code>...</code>是结构哈,看不懂就麻溜的alt+←)，当然它只会结构一层，深层里的代码还是要老实的写</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"> &lt;h1&gt;当前姓名:&#123;&#123;name&#125;&#125;&lt;/h1&gt;</span><br><span class="line"> <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前薪水:&#123;&#123;job.salary&#125;&#125;K<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="keyword">return</span> &#123;</span><br><span class="line">    ...toRefs(names)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="其他组合式API（了解，我寻思你基本上不会用）"><a href="#其他组合式API（了解，我寻思你基本上不会用）" class="headerlink" title="其他组合式API（了解，我寻思你基本上不会用）"></a>其他组合式API（了解，我寻思你基本上不会用）</h2><h3 id="shallowReactive-与-shallowRef"><a href="#shallowReactive-与-shallowRef" class="headerlink" title="shallowReactive 与 shallowRef"></a>shallowReactive 与 shallowRef</h3><p><code>shallowReactive</code>浅层次的响应式,它就是只把第一层的数据变为响应式，深层的数据不会变为响应式,<code>shallowRef</code>如果定义的是基本类型的数据，那么它和<code>ref</code>是一样的不会有什么改变，但是要是定义的是对象类型的数据，那么它就不会进行响应式，之前我们说过如果<code>ref</code>定义的是对象，那么它会自动调用<code>reactive</code>变为<code>Proxy</code>,但是要是用到的是<code>shallowRef</code>那么就不会调用<code>reactive</code>去进行响应式。</p>
<p><strong>shallowReactive：只处理对象最外层属性的响应式（浅响应式）。****shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = shallowReactive(&#123;</span><br><span class="line"> <span class="attr">name</span>:<span class="string">&#x27;大理段氏&#x27;</span>,</span><br><span class="line"> <span class="attr">age</span>:<span class="number">10</span>,</span><br><span class="line"> <span class="attr">job</span>:&#123;</span><br><span class="line">   <span class="attr">salary</span>:<span class="number">20</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> x = shallowRef(&#123;</span><br><span class="line"> <span class="attr">y</span>:<span class="number">0</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="readonly-与-shallowReadonly"><a href="#readonly-与-shallowReadonly" class="headerlink" title="readonly 与 shallowReadonly"></a>readonly 与 shallowReadonly</h3><p><code>readonly</code>是接收了一个响应式数据然后重新赋值，返回的数据就不允许修改（深层只读），<code>shallowReadonly</code>却只是浅层只读（第一层只读，其余层可以进行修改）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">names=readonly(names)</span><br><span class="line">names=shallowReadonly(names)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="toRaw-与-markRaw"><a href="#toRaw-与-markRaw" class="headerlink" title="toRaw 与 markRaw"></a>toRaw 与 markRaw</h3><p><code>toRaw</code>其实就是将一个由<code>reactive</code>生成的<strong>响应式对象</strong>转为<strong>普通对象</strong>。如果是<code>ref</code>定义的话，是没有效果的（包括<code>ref</code>定义的对象）<strong>如果在后续操作中对数据进行了添加的话，添加的数据为响应式数据</strong>，当然要是将数据进行<code>markRaw</code>操作后就不会变为响应式，可能大家会说，不就是和<code>readonly</code>一样吗？那肯定不一样咯，<code>readonly</code>是根本没办法改，但<code>markRaw</code>是不转化为响应式，但是数据还会发生改变。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;home&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前姓名:&#123;&#123;names.name&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前年龄:&#123;&#123;names.age&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前薪水:&#123;&#123;names.job.salary&#125;&#125;K<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-if</span>=<span class="string">&quot;names.girlFriend&quot;</span>&gt;</span>女朋友：&#123;&#123;names.girlFriend&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;names.name+=&#x27;!&#x27;&quot;</span>&gt;</span>点击加!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addAges&quot;</span>&gt;</span>点击加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addSalary&quot;</span>&gt;</span>点击薪水加一<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;add&quot;</span>&gt;</span>添加女朋友<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addAge&quot;</span>&gt;</span>添加女朋友年龄<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">import</span> &#123;reactive,toRaw,markRaw&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> names=reactive(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">name</span>:<span class="string">&#x27;老伍&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">age</span>:<span class="number">23</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="attr">job</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="attr">salary</span>:<span class="number">10</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">      &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">addAges</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      names.age++</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="built_in">console</span>.log(names)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">addSalary</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="keyword">let</span> fullName=toRaw(names)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      fullName.job.salary++</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="built_in">console</span>.log(fullName)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="keyword">let</span> girlFriend=&#123;<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>,<span class="attr">age</span>:<span class="number">40</span>&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      names.girlFriend=markRaw(girlFriend)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">addAge</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      names.girlFriend.age++</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="built_in">console</span>.log(names.girlFriend.age)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      names,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      add,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      addAge,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      addAges,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      addSalary</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="customRef"><a href="#customRef" class="headerlink" title="customRef"></a>customRef</h3><p><strong><code>customRef</code>创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。</strong></p>
<p>单纯觉得这个东西的作用只有防抖的作用（要是知道其他的用法可以告知一下我）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;keyWord&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;keyWord&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">import</span> &#123;customRef&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="attr">name</span>: <span class="string">&#x27;App&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="comment">//自定义一个ref——名为：myRef</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">myRef</span>(<span class="params">value,times</span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="keyword">let</span> time</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      <span class="keyword">return</span> customRef(<span class="function">(<span class="params">track,trigger</span>)=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">          <span class="function"><span class="title">get</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="built_in">console</span>.log(<span class="string">`有人从myRef中读取数据了，我把<span class="subst">$&#123;value&#125;</span>给他了`</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            track() <span class="comment">//通知Vue追踪value的变化（必须要有，并且必须要在return之前）</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="keyword">return</span> value</span></span></span><br><span class="line"><span class="javascript"><span class="xml">          &#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">          <span class="function"><span class="title">set</span>(<span class="params">newValue</span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="built_in">console</span>.log(<span class="string">`有人把myRef中数据改为了：<span class="subst">$&#123;newValue&#125;</span>`</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="built_in">clearTimeout</span>(time)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            time = <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">              value = newValue</span></span></span><br><span class="line"><span class="javascript"><span class="xml">              trigger() <span class="comment">//通知Vue去重新解析模板（必须要有）</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">            &#125;,times)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">          &#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">      &#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> keyWord = myRef(<span class="string">&#x27;HelloWorld&#x27;</span>,<span class="number">1000</span>) <span class="comment">//使用自定义的ref</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">return</span> &#123;keyWord&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">  &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>给你们说个趣事吧，顺便你们讲一下防抖节流的区别，之前有人在我公司面试的时候哈，给我说对项目进行了防抖节流处理，但是我细问防抖与节流的区别时却支支吾吾的，就很尴尬，然后我们就心照不宣的跳过了这个话题🤣🤣🤣</p>
<p>我是这样理解的</p>
<p><strong>防抖：在第一次触发事件时，不立即执行函数，而是给出一个时间段，如果短时间内大量触发同一事件，只会执行一次函数。</strong></p>
<p><strong>节流：函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活，如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再生效，直至过了这段时间才重新生效。</strong>（可以理解为游戏技能冷却期）</p>
<p>如果还是不是很能理解的话去看大佬的 <a target="_blank" rel="noopener" href="https://juejin.cn/post/7016502001911463950#heading-5">一杯茶的时间🍵，带你彻底学会手写防抖节流</a></p>
<h3 id="provide-与-inject"><a href="#provide-与-inject" class="headerlink" title="provide 与 inject"></a>provide 与 inject</h3><p>都知道组件传值吧，在vue2中，如果要在后代组件中使用父组件的数据，那么要一层一层的父子组件传值或者用到<code>vuex</code>，但是现在，无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 <code>provide</code> 选项来提供数据，子组件有一个 <code>inject</code> 选项来开始使用这些数据。</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3f7e77d5057475a91010b7d3608fa93~tplv-k3u1fbpfcp-watermark.awebp" alt="components_provide.png"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父</span></span><br><span class="line"><span class="keyword">import</span> &#123; provide &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"> <span class="keyword">let</span> fullname = reactive(&#123;<span class="attr">name</span>:<span class="string">&#x27;阿月&#x27;</span>,<span class="attr">salary</span>:<span class="string">&#x27;15k&#x27;</span>&#125;)</span><br><span class="line"> provide(<span class="string">&#x27;fullname&#x27;</span>,fullname) <span class="comment">//给自己的后代组件传递数据</span></span><br><span class="line"> <span class="keyword">return</span> &#123;...toRefs(fullname)&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//后代</span></span><br><span class="line"><span class="keyword">import</span> &#123;inject&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"> <span class="keyword">let</span> fullname = inject(<span class="string">&#x27;fullname&#x27;</span>)</span><br><span class="line"> <span class="keyword">return</span> &#123;fullname&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>当然子组件也可以用，但是请记住，父子组件传参是有方法的！！！别瞎搞。</p>
<h3 id="响应式判断"><a href="#响应式判断" class="headerlink" title="响应式判断"></a>响应式判断</h3><p>下面是vue3给的一些判断方法</p>
<p><strong>isRef: 检查值是否为一个 ref 对象。</strong></p>
<p><strong>isReactive：检查对象是否是由 <a href="https://link.juejin.cn/?target=https://v3.cn.vuejs.org/api/basic-reactivity.html%23reactive"><code>reactive</code></a> 创建的响应式代理。</strong></p>
<p><strong>isReadonly: 检查对象是否是由 <a href="https://link.juejin.cn/?target=https://v3.cn.vuejs.org/api/basic-reactivity.html%23readonly"><code>readonly</code></a> 创建的只读代理。</strong></p>
<p><strong>isProxy：检查对象是否是由 <a href="https://link.juejin.cn/?target=https://v3.cn.vuejs.org/api/basic-reactivity.html%23reactive"><code>reactive</code></a> 或 <a href="https://link.juejin.cn/?target=https://v3.cn.vuejs.org/api/basic-reactivity.html%23readonly"><code>readonly</code></a> 创建的 proxy。</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;ref, reactive,readonly,isRef,isReactive,isReadonly,isProxy &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>:<span class="string">&#x27;App&#x27;</span>,</span><br><span class="line">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> fullName = reactive(&#123;<span class="attr">name</span>:<span class="string">&#x27;小唐&#x27;</span>,<span class="attr">price</span>:<span class="string">&#x27;20k&#x27;</span>&#125;)</span><br><span class="line">    <span class="keyword">let</span> num = ref(<span class="number">0</span>)</span><br><span class="line">    <span class="keyword">let</span> fullNames = readonly(fullName)</span><br><span class="line">    <span class="built_in">console</span>.log(isRef(num))</span><br><span class="line">    <span class="built_in">console</span>.log(isReactive(fullName))</span><br><span class="line">    <span class="built_in">console</span>.log(isReadonly(fullNames))</span><br><span class="line">    <span class="built_in">console</span>.log(isProxy(fullName))</span><br><span class="line">    <span class="built_in">console</span>.log(isProxy(fullNames))</span><br><span class="line">    <span class="built_in">console</span>.log(isProxy(num))</span><br><span class="line">    <span class="keyword">return</span> &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="有趣的组件"><a href="#有趣的组件" class="headerlink" title="有趣的组件"></a>有趣的组件</h2><h3 id="Fragment"><a href="#Fragment" class="headerlink" title="Fragment"></a>Fragment</h3><p>对我而言这个更像是一种概念，它的意思就相当于创建页面时，给了一个虚拟根标签<code>VNode</code>，因为我们知道在vue2里面，我们是有根标签这个概念的，但是到来vue3，它是自动给你创建个虚拟根标签<code>VNode</code>（<code>Fragment</code>）,所以可以不要根标签。好处就是 <strong>减少标签层级, 减小内存占用</strong></p>
<h3 id="Teleport"><a href="#Teleport" class="headerlink" title="Teleport"></a>Teleport</h3><p><code>teleport</code> 提供了一种有趣的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。</p>
<p>其实就是可以不考虑你写在什么位置，你可以定义<code>teleport</code>在任意标签里进行定位等（常见操作为模态框），除了body外，还可以写css选择器（<code>id，class</code>）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre></td><td class="code"><pre><span class="line">//id定位</span><br><span class="line"> <span class="tag">&lt;<span class="name">teleport</span> <span class="attr">to</span>=<span class="string">&quot;#app&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;four&quot;</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;five&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">teleport</span>&gt;</span></span><br><span class="line">//class定位</span><br><span class="line"> <span class="tag">&lt;<span class="name">teleport</span> <span class="attr">to</span>=<span class="string">&quot;.one&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;four&quot;</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;five&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">teleport</span>&gt;</span></span><br><span class="line">//示例</span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;one&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>第一层<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;two&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>第二层<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;three&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>第三层<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">teleport</span> <span class="attr">to</span>=<span class="string">&quot;body&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;four&quot;</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;five&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">teleport</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">name</span>:<span class="string">&#x27;App&#x27;</span>,</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;&#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">&quot;less&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css"><span class="selector-class">.one</span>&#123;</span></span><br><span class="line"><span class="css">  <span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">  <span class="attribute">background-color</span>: blue;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.two</span>&#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">margin</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: aqua;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.three</span>&#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">background-color</span>: aliceblue;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">&#125;</span></span><br><span class="line"><span class="css"><span class="selector-class">.four</span>&#123;</span></span><br><span class="line"><span class="css">  <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">  <span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">  <span class="attribute">left</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">  <span class="attribute">right</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.5</span>);</span></span><br><span class="line"><span class="css">  <span class="selector-class">.five</span>&#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">    <span class="attribute">top</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>,-<span class="number">50%</span>);</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>:<span class="number">#f60</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">&#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>打开控制台然后触发事件，观看效果</p>
<h3 id="Suspense"><a href="#Suspense" class="headerlink" title="Suspense"></a>Suspense</h3><p>大家都知道在渲染组件之前进行一些异步请求是很常见的事，<code>suspense</code> 组件提供了一个方案，允许将等待过程提升到组件树中处理，而不是在单个组件中。但是！！！在vue3中特别说明了，<strong>Suspense 是一个试验性的新特性，其 API 可能随时会发生变动。特此声明，以便社区能够为当前的实现提供反馈。</strong>，我直接尬住，以后估计会发生改变，但是你们愿意卷的话可以去看文章<a target="_blank" rel="noopener" href="https://juejin.cn/post/6977869719546101796#heading-12">vue3的传送门teleport究竟有多神奇？suspense发起异步请求有多简约？</a>，嗯，记得写800字观后感</p>
<h2 id="vue3其他改动"><a href="#vue3其他改动" class="headerlink" title="vue3其他改动"></a>vue3其他改动</h2><h3 id="router"><a href="#router" class="headerlink" title="router"></a>router</h3><p>可能大家会想到路由跳转的问题，可能大家会以为还是用<code>this.$router.push</code>来进行跳转，但是哦，在vue3中，这些东西是没有的，它是定义了一个<code>vue-router</code>然后引入的<code>useRoute</code>,<code>useRouter</code> 相当于vue2的 <code>this.$route</code>，<code>this.$router</code>,然后其他之前vue2的操作都可以进行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;useRouter,useRoute&#125; <span class="keyword">from</span> <span class="string">&quot;vue-router&quot;</span>;</span><br><span class="line"><span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">const</span> router= useRouter()</span><br><span class="line">  <span class="keyword">const</span> route= useRoute()</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.$route.push(<span class="string">&#x27;/about&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  onMounted(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(route.query.code)</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span>&#123;</span><br><span class="line">    fn</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="全局API的转移"><a href="#全局API的转移" class="headerlink" title="全局API的转移"></a>全局API的转移</h3><table>
<thead>
<tr>
<th>2.x 全局 API（<code>Vue</code>）</th>
<th>3.x 实例 API (<code>app</code>)</th>
</tr>
</thead>
<tbody><tr>
<td>Vue.config.xxxx</td>
<td>app.config.xxxx</td>
</tr>
<tr>
<td>Vue.config.productionTip</td>
<td><strong>移除</strong></td>
</tr>
<tr>
<td>Vue.component</td>
<td>app.component</td>
</tr>
<tr>
<td>Vue.directive</td>
<td>app.directive</td>
</tr>
<tr>
<td>Vue.mixin</td>
<td>app.mixin</td>
</tr>
<tr>
<td>Vue.use</td>
<td>app.use</td>
</tr>
<tr>
<td>Vue.prototype</td>
<td>app.config.globalProperties</td>
</tr>
</tbody></table>
<h3 id="其他改变"><a href="#其他改变" class="headerlink" title="其他改变"></a>其他改变</h3><p><strong>移除</strong>keyCode作为 v-on 的修饰符，同时也不再支持<code>config.keyCodes</code></p>
<p><strong>移除</strong><code>v-on.native</code>修饰符</p>
<p><strong>移除</strong>过滤器（<code>filter</code>）</p>
<p>…</p>
<p>对了有手痒的想实战项目的话可以去看一看大佬的<a target="_blank" rel="noopener" href="https://juejin.cn/post/6945072070132760590">🎉🎉Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦🎉🎉</a></p>
<p>文章出处 转自：<a target="_blank" rel="noopener" href="https://juejin.cn/post/7030992475271495711">迷鹿鱼</a></p>

    </div>

<div>

<div>

    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>

</div>


</div>

    
    
    
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://weibo.com/u/6480746839">
            <span class="icon">
              <i class="fab fa-weibo"></i>
            </span>

            <span class="label">微博</span>
          </a>
        </div>

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://www.zhihu.com/people/ai-xiao-92-34">
            <span class="icon">
              <i class="fab fa-zhihu"></i>
            </span>

            <span class="label">知乎</span>
          </a>
        </div>

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://mp.weixin.qq.com/s/gQBZKv4EyHc_X-CSebCjIw">
            <span class="icon">
              <i class="fab fa-weixin"></i>
            </span>

            <span class="label">微信</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/12/09/%E5%B8%B8%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AFJavaScript%E6%96%B9%E6%B3%95%E5%B0%81%E8%A3%85/" rel="prev" title="常用的前端JavaScript方法封装">
      <i class="fa fa-chevron-left"></i> 常用的前端JavaScript方法封装
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/12/08/%E4%B8%BB%E9%A2%98/" rel="next" title="hexo的使用和Loeify主题的配置">
      hexo的使用和Loeify主题的配置 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-number">1.</span> <span class="nav-text"></span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vue3%E4%BF%9D%E5%A7%86%E7%BA%A7%E6%95%99%E7%A8%8B"><span class="nav-number">2.</span> <span class="nav-text">vue3保姆级教程</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%9D%E5%AD%A6vue3"><span class="nav-number">3.</span> <span class="nav-text">初学vue3</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%86%E8%A7%A3vue3%E5%88%9B%E5%BB%BA%E6%96%B9%E5%BC%8F"><span class="nav-number">3.1.</span> <span class="nav-text">了解vue3创建方式</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%86%E6%9E%90vue3"><span class="nav-number">4.</span> <span class="nav-text">分析vue3</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E4%BA%86%E8%A7%A3"><span class="nav-number">4.1.</span> <span class="nav-text">基本了解</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E7%BB%84%E5%90%88%E5%BC%8FAPI%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%81%EF%BC%81%EF%BC%81%EF%BC%89"><span class="nav-number">4.2.</span> <span class="nav-text">常用组合式API（重点！！！）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#setup"><span class="nav-number">4.2.1.</span> <span class="nav-text">setup</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ref%E4%B8%8Ereactive"><span class="nav-number">4.2.2.</span> <span class="nav-text">ref与reactive</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#ref"><span class="nav-number">4.2.2.1.</span> <span class="nav-text">ref</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#reactive"><span class="nav-number">4.2.2.2.</span> <span class="nav-text">reactive</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ref%E4%B8%8Ereactive%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">4.2.2.3.</span> <span class="nav-text">ref与reactive的区别</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue3%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86"><span class="nav-number">4.2.3.</span> <span class="nav-text">vue3的响应式原理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#computed%EF%BC%8Cwatch%E4%B8%8EwatchEffect"><span class="nav-number">4.2.4.</span> <span class="nav-text">computed，watch与watchEffect</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#computed"><span class="nav-number">4.2.4.1.</span> <span class="nav-text">computed</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#watch"><span class="nav-number">4.2.4.2.</span> <span class="nav-text">watch</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#watchEffect"><span class="nav-number">4.2.4.3.</span> <span class="nav-text">watchEffect</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="nav-number">4.2.5.</span> <span class="nav-text">生命周期</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#hooks%E5%87%BD%E6%95%B0"><span class="nav-number">4.2.6.</span> <span class="nav-text">hooks函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#toRef%E4%B8%8EtoRefs"><span class="nav-number">4.2.7.</span> <span class="nav-text">toRef与toRefs</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#toRef"><span class="nav-number">4.2.7.1.</span> <span class="nav-text">toRef</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#toRefs"><span class="nav-number">4.2.7.2.</span> <span class="nav-text">toRefs</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B6%E4%BB%96%E7%BB%84%E5%90%88%E5%BC%8FAPI%EF%BC%88%E4%BA%86%E8%A7%A3%EF%BC%8C%E6%88%91%E5%AF%BB%E6%80%9D%E4%BD%A0%E5%9F%BA%E6%9C%AC%E4%B8%8A%E4%B8%8D%E4%BC%9A%E7%94%A8%EF%BC%89"><span class="nav-number">4.3.</span> <span class="nav-text">其他组合式API（了解，我寻思你基本上不会用）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#shallowReactive-%E4%B8%8E-shallowRef"><span class="nav-number">4.3.1.</span> <span class="nav-text">shallowReactive 与 shallowRef</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#readonly-%E4%B8%8E-shallowReadonly"><span class="nav-number">4.3.2.</span> <span class="nav-text">readonly 与 shallowReadonly</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#toRaw-%E4%B8%8E-markRaw"><span class="nav-number">4.3.3.</span> <span class="nav-text">toRaw 与 markRaw</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#customRef"><span class="nav-number">4.3.4.</span> <span class="nav-text">customRef</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#provide-%E4%B8%8E-inject"><span class="nav-number">4.3.5.</span> <span class="nav-text">provide 与 inject</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%88%A4%E6%96%AD"><span class="nav-number">4.3.6.</span> <span class="nav-text">响应式判断</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%89%E8%B6%A3%E7%9A%84%E7%BB%84%E4%BB%B6"><span class="nav-number">4.4.</span> <span class="nav-text">有趣的组件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Fragment"><span class="nav-number">4.4.1.</span> <span class="nav-text">Fragment</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Teleport"><span class="nav-number">4.4.2.</span> <span class="nav-text">Teleport</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Suspense"><span class="nav-number">4.4.3.</span> <span class="nav-text">Suspense</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue3%E5%85%B6%E4%BB%96%E6%94%B9%E5%8A%A8"><span class="nav-number">4.5.</span> <span class="nav-text">vue3其他改动</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#router"><span class="nav-number">4.5.1.</span> <span class="nav-text">router</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%A8%E5%B1%80API%E7%9A%84%E8%BD%AC%E7%A7%BB"><span class="nav-number">4.5.2.</span> <span class="nav-text">全局API的转移</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B6%E4%BB%96%E6%94%B9%E5%8F%98"><span class="nav-number">4.5.3.</span> <span class="nav-text">其他改变</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="爱笑"
      src="/images/title.jpg">
  <p class="site-author-name" itemprop="name">爱笑</p>
  <div class="site-description" itemprop="description">热衷于前端，热衷于王者，王者峡谷乱杀 -_-</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">14</span>
          <span class="site-state-item-name">文章</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">5</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="sidebar-button motion-element"><i class="fa fa-comment"></i>
    评论
  </a>
  </div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/aixiao0322" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;aixiao0322" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://gitee.com/aixiao0322" title="gitee → https:&#x2F;&#x2F;gitee.com&#x2F;aixiao0322" rel="noopener" target="_blank"><i class="fab fa-gratipay fa-fw"></i>gitee</a>
      </span>
      <span class="links-of-author-item">
        <a href="/aini17630247921@163.com" title="E-Mail → aini17630247921@163.com"><i class="fab fa-youtube fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://juejin.cn/user/255500362975704" title="掘金 → https:&#x2F;&#x2F;juejin.cn&#x2F;user&#x2F;255500362975704" rel="noopener" target="_blank"><i class="fab fa-artstation fa-fw"></i>掘金</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">爱笑</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>




  
















  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : true,
      appId      : 'l6M4SnuhiCKBnxpPdX1WbBB9-gzGzoHsz',
      appKey     : 'u1jJ2Fs9DGFdfpIgDQll55ju',
      placeholder: "请举手发言.... 请你填写自己的昵称，邮箱以及博客链接，为了更方便的找到您",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : true,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : true,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

</body>
</html>
